<template>
	<view style="min-height: 100vh;">
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn slot-click @click="backAction"></x-back-btn>
				<view class="u-f-40 font-bold common-title">{{ lang_first.register }}</view>
				<view></view>
			</view>
		</view>
		
		<view>
			<view class="form-container u-m-t-90">
				<!-- 提示语 -->
				<view class="sub-title">{{ lang_first.registerTips }}</view>
				
				<!-- 手机号 -->
				<view class="font-bold u-m-t-56">{{ lang_first.phoneNumber }}</view>
				<view class="form-item flex-center u-m-t-20">
					<x-number-code @change="getAreaCode"></x-number-code>
					
					<!-- 手机号最长15位，以国际号码为准 -->
					<input
					v-model="form.phoneNumber"
					maxlength="15"
					style="width: 100%"
					:placeholder="lang_first.phoneNumberTips"
					@input="inputAction('phoneNumber')"/>
				</view>
				
				<!-- 验证码 -->
				<view class="font-bold u-m-t-56">{{ lang_first.code }}</view>
				<view class="form-item flex-center u-m-t-18">
					<input
					v-model="form.code"
					style="width: 100%"
					:placeholder="lang_first.codeTips"
					@input="inputAction('code')"/>
					
					<view
					class="color-danger clear-flex"
					@click="getCode"
					>{{ codetips || lang_first.getCode }}</view>
				</view>
				
				<!-- 密码 -->
				<view class="font-bold u-m-t-56">{{ lang_first.password }}</view>
				<view class="form-item flex-center u-m-t-18">
					<input
					v-model="form.password1"
					style="width: 100%"
					:placeholder="lang_first.passwordTips"/>
				</view>
				
				<!-- 密码 -->
				<view class="font-bold u-m-t-56">{{ lang_first.twicePassword }}</view>
				<view class="form-item flex-center u-m-t-18">
					<input
					v-model="form.password2"
					style="width: 100%"
					:placeholder="lang_first.passwordTips"/>
				</view>
				
				<!-- 邀请码 -->
				<view class="font-bold u-m-t-56">{{ lang_first.inviteCode }}</view>
				<view class="form-item flex-center u-m-t-18 u-m-b-56">
					<input
					v-model="form.inviteCode"
					style="width: 100%"
					:placeholder="lang_first.inviteCodeTips"/>
					
					<view class="color-red nowrap" @click="scanInviteCode">扫码获取</view>
				</view>
				
				<!-- 隐私政策 -->
				<view class="u-f-24 flex">
					<x-checkbox v-model="checked" activeColor="red" size="28" name="0"></x-checkbox>
					<view class="u-m-l-20 clear-flex">
						{{ lang_first.agreementTips }}
						<text class="font-bold" @click="jumpUrl('/pages/other/richText/richText?type=policy')">《{{ lang_once.policy }}》</text>{{ lang_common.and }}
						<text class="font-bold" @click="jumpUrl('/pages/other/richText/richText?type=privacy')">《{{ lang_once.privacy }}》</text>
					</view>
				</view>
			</view>
		
			<!-- 提交按钮 -->
			<view
			class="flex-center-center"
			style="margin-top: 100rpx">
				<x-common-btn
				width="578"
				height="102"
				background="#FD1E43"
				:disabled="!authRegister"
				@click="submitAction"
				>{{ lang_first.register }}</x-common-btn>
			</view>
		</view>
		
		<!-- 验证码控件 -->
		<u-verification-code
		:seconds="seconds"
		:start-text="lang_first.getCode"
		:end-text="lang_first.twiceCode"
		:change-text="`X${ lang_unit.seconds }`"
		ref="uCode" 
		@change="codeChange"></u-verification-code>
		
		<view style="height: 200rpx"></view>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { USER_TYPE, USER_INFO } from '@/config.js'
	import { RegAndLogin, SendLoginCode } from '@/api/base.js'
	import areacode from '@/utils/areacode.js'
	export default {
		data() {
			return {
				areacodeObj: areacode.list[0],
				seconds: 60,
				codetips: '',
				
				checked: false,
				
				// 表单
				form: {
					phoneNumber: '',
					password1: '',
					password2: '',
					code: '',
					inviteCode: ''
				},
				
				settingValue: '',
				
				isClick: false
			}
		},
		computed: {
			authRegister() {
				let keys = ['phoneNumber', 'password1', 'password2', 'code']
				let status = true
				keys.map(item => {
					if (!this.form[item]) {
						status = false
					}
				})
				return status && this.checked
			}
		},
		onLoad({ inviteCode }) {
			console.log('inviteCode => ', inviteCode)
			if (inviteCode) {
				this.form.inviteCode = inviteCode
			}
		},
		methods: {
			// 处理数字
			inputAction(key = '') {
				let value = this.form[key]
				let timer = setTimeout(() => {
					this.$set(this.form, key, value.replace(/[^0-9]/ig, ""))
				}, 50)
			},
			// 扫码
			async scanInviteCode() {
				let result = await this.authCamera()
				if (result) {
					uni.scanCode({
						success: (res) => {
							let { result } = res
							result = result && result.split('&') || []
							let inviteCode = result.find(item => item.indexOf('inviteCode=') > -1) || ''
							inviteCode = inviteCode.split('=')[1] || ''
							if (inviteCode) {
								this.form.inviteCode = inviteCode
							}
						}
					});
				} else {
					this.settingValue = 'camera'
				}
			},
			// 返回
			backAction() {
				let userInfo = uni.getStorageSync(USER_INFO)
				if (!userInfo) {
					uni.reLaunch({
						url: `/pages/first/select/select`
					})
				} else {
					uni.switchTab({
						url: `/pages/tabbar/${ uni.getStorageSync(USER_TYPE) || 'user' }/index/index`
					})
				}
			},
			// 响应国际区域回调函数
			getAreaCode(e = {}) {
				this.areacodeObj = { ...e }
			},
			// 切换密码和验证码登录
			changeCurrentLogin() {
				this.currentLogin = this.currentLogin === 0 ? 1 : 0
			},
			// 获取验证码
			getCode() {
				if (!this.form.phoneNumber) {
					return this.$api.msg(this.lang_first['phoneNumberTips'])
				}
				if(this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
					SendLoginCode({ phone: this.form.phoneNumber, prefixCode: this.areacodeObj.code }).then(({ data }) => {
						console.log(data);
						this.$refs.uCode.start();
					})
				}
			},
			// 验证码变化后触发
			codeChange(e) {
				this.codetips = e
			},
			// 提交表单
			submitAction() {
				// 是否已经勾选协议
				if (!this.checked) {
					this.$api.msg(this.lang_first.nullAgreementTips)
					return;
				}
				// 空值处理
				let form = this.form
				
				// 密码不一致
				if (form.password1 !== form.password2) {
					this.$api.msg(this.lang_first.twicePasswordError)
					return;
				}
				
				let { phoneNumberTips, passwordTips, codeTips, inviteCodeTips } = this.lang_first
				for (let key in form) {
					if (!form[key] && key !== 'inviteCode') {
						let isPassword = key.indexOf('password') > -1
						this.$api.msg(this.lang_first[(isPassword ? 'password' : key) + 'Tips'])
						return;
					}
				}
				const { phoneNumber: phone, code, password1: password, inviteCode }  = form
				const { code: prefixCode } = this.areacodeObj
				const uuid = '123456'
				if (this.isClick) return;
				this.isClick = false
				RegAndLogin({ phone, prefixCode, code, password, uuid, inviteCode }).then((userInfo) => {
					// 进入初始化信息页面
					this.$store.commit('UPDATE_USER_INFO', userInfo)
					this.$store.commit('BEFORE_INTO_INDEX', 'register')
					let timer = setTimeout(() => {
						this.isClick = false
					}, 1000)
				}).catch(() => { this.isClick = false })
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		&-navbar {
			position: relative;
			padding: 0 38rpx;
			height: 98rpx
		}
	}
	
	.login-title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	.sub-title {
		font-size: 56rpx;
		font-weight: 600;
		color: #333333;
	}
	
	.form-container {
		padding: 0 100rpx 0 80rpx;
	}
	
	.form-item {
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid rgba(179, 185, 197, .2);
	}
</style>
